<ng-container *ngIf="loaded && organizations$ | async as organizations">
  <div class="content org-filter-content" *ngIf="loaded && shouldShow(organizations)">
    <ng-container *ngIf="selectedVault$ | async as vaultFilterDisplay">
      <button
        type="button"
        #toggleVaults
        class="org-filter"
        (click)="openOverlay()"
        aria-haspopup="menu"
        aria-controls="cdk-overlay-container"
        [attr.aria-expanded]="isOpen"
        [attr.aria-label]="vaultFilterDisplay"
      >
        <span class="org-filter-text-container">
          <span class="org-filter-text-name">{{ vaultFilterDisplay }}</span
          >&nbsp;
          <span
            ><i
              class="bwi bwi-sm"
              aria-hidden="true"
              [ngClass]="{ 'bwi-angle-down': !isOpen, 'bwi-angle-up': isOpen }"
            ></i></span
        ></span>
      </button>
    </ng-container>
    <ng-template class="vault-select-container" #vaultSelectorTemplate>
      <div
        class="vault-select"
        [@transformPanel]="'open'"
        cdkTrapFocus
        cdkTrapFocusAutoCapture
        role="dialog"
        aria-modal="true"
      >
        <button type="button" appStopClick (click)="selectAllVaults()">
          <div class="vault-select-org-text-container">
            <i class="bwi bwi-fw bwi-filter vault-select-prefix-icon" aria-hidden="true"></i>
            <span class="vault-select-org-name">{{ "allVaults" | i18n }}</span>
          </div>
        </button>
        <button
          type="button"
          *ngIf="!enforcePersonalOwnership"
          appStopClick
          (click)="selectMyVault()"
        >
          <div class="vault-select-org-text-container">
            <i class="bwi bwi-fw bwi-user vault-select-prefix-icon" aria-hidden="true"></i>
            <span class="vault-select-org-name">{{ "myVault" | i18n }}</span>
          </div>
        </button>
        <button
          type="button"
          *ngFor="let organization of organizations"
          appStopClick
          (click)="selectOrganization(organization)"
        >
          <div class="vault-select-org-text-container">
            <i
              *ngIf="organization.planProductType !== 1"
              class="bwi bwi-fw bwi-business vault-select-prefix-icon"
              aria-hidden="true"
            ></i>
            <i
              *ngIf="organization.planProductType === 1"
              class="bwi bwi-fw bwi-family vault-select-prefix-icon"
              aria-hidden="true"
            ></i>

            <span class="vault-select-org-name">{{ organization.name }}</span
            ><i
              *ngIf="!organization.enabled"
              class="bwi bwi-fw bwi-exclamation-triangle text-danger vault-select-suffix-icon"
              attr.aria-label="{{ 'organizationIsDisabled' | i18n }}"
              appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
            ></i>
          </div>
        </button>
      </div>
    </ng-template>
  </div>
</ng-container>
